import React, { useState } from 'react';
import styles from './index.less';
import { Button, Collapse, Radio, Tooltip, Table, Typography, Upload, message, Pagination } from 'antd';
import { PlusOutlined, DeleteFilled, CaretRightOutlined } from '@ant-design/icons'
import IconFont from '@/components/IconFont';
import InitForm from '@/components/InitForm';
import { getFetch } from '@/utils/doFetch';
import moment from 'moment';
import { history } from 'umi';

function Mydata() {
    const [editing, setediting] = useState(false);
    const [activeKey, setactiveKey] = useState([]);

    return (<div>
        <div className='imgbg' style={{ backgroundImage: `url(${require("@/assets/myrepobg.jpg")})`, height: 300 }}>
            <div className="container" style={{ display: "flex", height: "100%" }}>
                <div className={styles.left}>
                    <h2>报告生成说明</h2>
                    <p>
                        任意一个模板必须基于相应的数据组来构建，在复制为新模板之后需要重新指定新模板对应的数据组，
                        <br />
                        并构建新的数据链接关系。
                    </p>
                </div>
            </div>
        </div>

        <div className="container" style={{ padding: "12px 0" }}>
            <InitForm
                fields={{
                    "data_group_id": {
                        "value": null,
                        "type": "select",
                        "title": "选择数据组",
                        "name": [
                            "data_group_id"
                        ],
                        "required": true,
                        "options": {
                            database: () => getFetch({ url: "/api/data_group", params: { is_all: 1 } }),
                            params: {}
                        },
                        "linked": true,
                    },
                    "file_ids": {
                        "value": null,
                        "type": "checktable",
                        "title": "选择数据文件",
                        "name": [
                            "file_ids"
                        ],
                        "required": true,
                        "columns": [
                            {
                                "title": "数据名称",
                                "dataIndex": "file_name",
                                "key": "file_name",
                            },
                            {
                                "title": "更新时间",
                                "dataIndex": "created_at",
                                "key": "created_at",
                                "render": (text, record) => {
                                    return moment(text).format("YYYY-MM-DD")
                                }
                            },
                            {
                                "title": "变量数量",
                                "dataIndex": "variable_num",
                                "key": "variable_num"
                            }
                        ],
                        "editable": false,
                        "path": "/api/data_group/file_list",
                        "extraparams": { "data_group_id": "linked" },
                        "rowKey": "id",
                        "rowName": "file_name",
                        "tabletype": "checkbox",
                        "pagination": "false",
                        "col": {
                            "span": 24
                        }
                    },
                    "id": {
                        "value": null,
                        "type": "select",
                        "title": "选择报告模板",
                        "name": [
                            "id"
                        ],
                        "required": true,
                        "belinked": {
                            "options": {
                                database: (params) => getFetch({ url: "/api/data_group/template_list", params }),
                                params: {
                                    "data_group_id": "linked"
                                }
                            }
                        }

                    },
                }}
                onChange={() => {

                }}
                submitData={(val) => {
                    history.push({
                        pathname: "/preview",
                        query: {
                            ...val,
                        }
                    })
                }}
                col={{ span: 24 }}
            ></InitForm>
        </div>


    </div>);
}

export default Mydata;